import pao = require('../public');
import paoClient = require('./client');
import paoControls = require('./controls');

const moduleName: string = "pao.client";

/**
 * 数据查询器
 */
export interface dataQueryer {
    /**
     * 执行查询
     */
    onQuery?():void;
    /**
     * 自动查询时间间隔（单位：毫秒），如果大于零，表示自动执行；如果小于等于0，表示手动执行
     */
    autoQueryInterval?: number;
}

/**
 * 数据显示器
 */
export interface dataDisplayer {
    /**
     * 清除数据
     */
    clearData?(): void;
    /**
     * 准备数据格式
     */
    prepareDataSchema?(columns: pao.dataColumn[]): void;
    /**
     * 添加数据
     */
    addData?(data: pao.dataTable): void;
}

@pao.addon("字段编辑信息", "包含了字段的信息和编辑器信息", moduleName)
export class fieldEditInfo extends pao.dataField {
    /**
     * 编辑器控制器
     */
    editControl?: paoControls.fieldControl;
}

/**
 * 参数控制器
 */
@pao.addon("参数控制器", "用于输入参数的参数控制器", moduleName)
@paoClient.template('<div><div name="fieldContainers"></div><button>查询</button></div>')
export class parameterControl extends paoClient.baseControl implements dataQueryer {
    /**
     * 字段列表
     */
    fields?: fieldEditInfo[];
    /**
     * 自动查询时间间隔
     */
    autoQueryInterval?: number;
    /**
     * 单词查询数量
     */
    queryCount?: number;
    /**
     * 数据源
     */
    dataSource?: pao.dataSource;
    /**
     * 是否查询中
     */
    inQuery?: boolean;
    /**
     * 字段容器
     */
    $fieldContainers?: JQuery = undefined;

    /**
     * 获取参数值
     * @return 参数值
     */
    getParamValues?() : any {
        let paramValues = {};
        if(this.fields) {
            for(let field of this.fields) {
                paramValues[field.name] = field.editControl.getValue();
            }
        }
        return paramValues;
    }

    /**
     * 查询事件
     */
    onQuery():void {
        if(this.inQuery)
            return;

        this.inQuery = true;
        if(!this.queryCount)
            this.queryCount = 500;

        // 执行查询
        this.dataSource.doQuery({},(data: any, err?: any)=>{
            if(err) {
                pao.log(err, "error");
                this.inQuery = false;
            } else {
            }
            this.inQuery = false;
        }, 0, this.queryCount);
    }

    onAfterBind?() : void {
        /**
         * 创建编辑器控件
         */
        let i = 0;
        for(let field of this.fields) {
            field.editControl.appendTo(this.$fieldContainers[0]);
            i++;
        }

        if(this.autoQueryInterval > 0) {
            /**
             * 定期执行查询
             */
            let timer = window.setInterval(()=>{
                this.onQuery();
            }, this.autoQueryInterval);
        }
    }
}

/**
 * 基础数据显示器
 */
@pao.addon("基础数据显示器", "所有数据显示器的基类", moduleName)
@paoClient.template('<div></div>')
export abstract class baseDataDisplayer extends paoClient.baseControl implements dataDisplayer {
    /**
     * 显示数据
     */
    abstract addData?(data: any): void;
    /**
     * 清除数据
     */
    abstract clearData?(): void;
}


/**
 * 图表
 */
@pao.addon("图表", "echart图表", moduleName)
@paoClient.template('<div style="height:200px"></div>')
export class echartDataDisplayer extends baseDataDisplayer {
    /**
     * 图表对象
     */
    private chart : any;

    /**
     * 选项
     */
    options: any;
    /**
     * 清除数据
     */
    clearData?(): void {
        this.chart.clear();
    }
    /**
     * 准备数据格式
     */
    prepareDataSchema?(columns: pao.dataColumn[]): void {

    }
    /**
     * 添加数据
     */
    addData?(data: pao.dataTable): void {
        this.chart.addData(data);
    }
    onAfterBind?() {   
        this.chart = echarts.init(this.element);
        // 为echarts对象加载数据 
        this.chart.setOption(this.options);
    }
}